<template>
  <view class="function-container">
    <!-- 功能列表 -->
    <view 
      class="function-item" 
      v-for="(item, index) in functionList" 
      :key="index"
      @click="handleClick(item)"
    >
      <image class="function-icon" :src="item.icon" mode="aspectFit" />
      <text class="function-title">{{ item.title }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 功能列表数据
const functionList = ref([
	{
	  title: '种鹅信息', 
	  icon: '/static/assets/fun/鹅.png',
	    path: '/pages/goose/goose' 
	},
	{
	  title: '孵化数据', 
	  icon: '/static/assets/fun/孵化器-1.png',
	    path: '/pages/hatch/hatch' 
	},
	 
	{
	  title: '选育数据', 
	  icon: '/static/assets/fun/选育数据.png',
	    path: '/pages/selecting/selecting' 
	},
    { 
    title: '员工打卡', 
    icon: '/static/assets/fun/打卡.png',
    path: '/pages/code/code' 
  },
  
 {
   title: '健康信息', 
   icon: '/static/assets/fun/核对繁殖记录卡.png',
     path: '/pages/healthy/healthy' 
 },  
  {
    title: '设备信息', 
    icon: '/static/assets/fun/打卡.png',
      path: '/pages/device/device' 
  },
  {
    title: '消毒数据', 
    icon: '/static/assets/fun/消毒.png',
      path: '/pages/disinfect/disinfect' 
  },
  {
     title: '预警信息', 
     icon: '/static/assets/fun/库存预警.png',
     path: '/pages/warn/warn' 
   }
   
])

// 点击跳转对应的功能路径
const handleClick = (item) => {
  uni.navigateTo({
    url: item.path
  })
}
</script>

<style lang="scss" scoped>
.function-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10rpx;
  background:$uni-bg-color;
  width: 90%;
  border-radius: 20rpx;
  padding: 25rpx 0rpx 25rpx 0rpx;
}

.function-item {
  padding: 3rpx;
  margin: 20rpx 6rpx 20rpx 7rpx;
  background: $uni-bg-color;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);//设置盒子阴影
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

.function-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 20rpx;
}

.function-title {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  line-height: 1.4;
  padding: 0 20rpx;
}
</style>